<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-button type="primary" @click="handleEchartsClick"
          >echarts图表</el-button
        >
      </el-header>
      <el-main>
        <el-button type="primary" @click="handleAddClick">新增</el-button>

        <el-table :data="state.data">
          <el-table-column prop="id" label="id"></el-table-column>
          <el-table-column prop="name" label="name"></el-table-column>
          <el-table-column prop="value" label="value"></el-table-column>
          <el-table-column prop="lable" label="lable"></el-table-column>
          <el-table-column fixed="right" label="Operations" width="240">
            <template #default="scope">
              <el-button type="success" @click="handleEditClick(scope.row)"
                >编辑</el-button
              >
              <el-button type="danger" @click="handleDleClick(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table></el-main
      >
    </el-container>
    <el-dialog
      v-model="centerDialogVisible"
      :title="!title ? '编辑' : '新增'"
      width="50%"
      center
    >
      <el-form :model="state.form" label-width="120px">
        <el-form-item label="name">
          <el-input v-model="state.form.name" />
        </el-form-item>
        <el-form-item label="value">
          <el-select placeholder="value" v-model="state.form.value">
            <el-option label="value" value="value" />
            <el-option label="value2" value="value3" />
          </el-select>
        </el-form-item>
        <el-form-item label="lable">
          <el-select placeholder="value" v-model="state.form.lable">
            <el-option label="value" value="value" />
            <el-option label="value2" value="value3" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="
              centerDialogVisible = false;
              form = { name: null, value: null, lable: null };
            "
            >返回</el-button
          >
          <el-button type="primary" @click="submit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getList1, addList1, editList1, deleteMysql } from "@/api/index.js";
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
// import vform from "./vform";
export default {
  name: "index",
  setup() {
    let title = ref(false); //弹窗标题
    let centerDialogVisible = ref(false); // 弹窗开关
    const state = reactive({ data: [], form: {} }); //响应式reactive    复杂类型    列表 form表单
    //列表
    const getList = () => {
      getList1().then((res) => {
        state.data = res.data.data;
      });
    };
    onMounted(() => {
      getList();
    });

    //新增
    const handleAddClick = () => {
      state.form = { id: null, name: null, value: null, lable: null };
      title.value = true;
      centerDialogVisible.value = true;
    };
    //编辑
    const handleEditClick = (scope) => {
      title.value = false;
      console.log(scope);
      state.form = { ...scope };
      console.log(state.form);
      centerDialogVisible.value = true;
    };
    // 删除
    const handleDleClick = (scope) => {
      deleteMysql({ id: scope }).then(() => {
        getList();
      });
    };
    //提交
    const submit = () => {
      centerDialogVisible.value = false;
      if (title.value) {
        const time = new Date().getTime();
        const addData = {
          ...state.form,
          id: parseFloat(time),
        };
        console.log(addData);
        addList1(addData).then((res) => {
          getList();
        });
      } else {
        const EditData = {
          ...state.form,
        };
        editList1(EditData).then(() => {
          getList();
        });
      }
    };
    //路由跳转页面
    const route = useRoute();
    const router = useRouter();
    const handleEchartsClick = () => {
      router.push({
        path: "/echarts",
      });
    };
    return {
      state,
      handleAddClick,
      handleEditClick,
      handleDleClick,
      centerDialogVisible,
      submit,
      title,
      handleEchartsClick,
    };
  },
};
</script>
<style></style>
